const tmpl = `
<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { getApi, updateApi, createApi, unAuditApi } from '/@/api/mes/{{domian}}'
import { useInModal } from '/@/hooks/useModal'
import { useSuccessMessage } from '/@/hooks/useMessage'
import dayjs from 'dayjs'

const props = defineProps(({
  id: String
}))

const emits = defineEmits(['change'])

const modal = useInModal()

const formRef = ref<FormMakerInstance>();
const formProps = reactive<FormMakerProps>({
  name: '{{domian}}Form',
  model: {
    id: 0,
    code: '',
    productId: void 0,
    planStartDate: dayjs().format('YYYY-MM-DD'),
    quantity: 1,
    isAudited: false
  },
  options: [
    {
      field: "code", label: "工单编号",
      component: {
        key: 'ElInput',
        props: {
          placeholder: '为空自动生成'
        }
      }
    },
    {
      field: "productId", label: "产品", required: true, component: {
        key: 'SelectMaker',
        props: {
          dataSource: 'Product'
        }
      }
    },
    { field: "planStartDate", label: "计划开始", required: true, component: 'ElDatePicker' },
    { field: "quantity", label: "数量", required: true, component: 'ElInputNumber' }
  ]
})

const loadViewData = () => {
  if (formProps.model.id) {
    modal.loading(true)
    getApi(formProps.model.id)
      .then(res => {
        Object.assign(formProps.model, res.data)
      })
      .finally(() => modal.loading(false))
  }
}

watch(() => props.id, (id: string) => {
  formProps.model.id = id
  loadViewData()
}, { immediate: true })

const handConfirm = async (btnName: string) => {

  await formRef.value.validate()

  modal.loadingWarp(async () => {
    const postData = {
      ...formProps.model
    }


    if (formProps.model.id) {
      await updateApi(postData)
    } else {
      const { data } = await createApi(postData)
      formProps.model.id = data.id
    }

    useSuccessMessage(btnName + '成功');
    emits('change')
    loadViewData()
  })
}

const handUnAudit = async (btnName: string) => {
  modal.loadingWarp(async () => {
    await unAuditApi(formProps.model.id)
    useSuccessMessage(btnName + '成功')

    emits('change')
    loadViewData()
  })
}

const viewLayout: ViewLayoutProps = {
  buttons: [
    {
      title: '保存',
      type: 'primary',
      visible: () => !formProps.model.isAudited,
      onClick: handConfirm
    },
    {
      title: '保存并审核',
      type: 'primary',
      visible: () => !formProps.model.isAudited,
      onClick: (btnName) => {
        formProps.model.isAudited = true;
        handConfirm(btnName)
      }
    },
    {
      title: '反审核',
      type: 'primary',
      visible: () => formProps.model.isAudited,
      onClick: handUnAudit
    },
    { title: '取消', onClick: () => modal.close() },
  ]
}



</script>

<template>
  <ViewLayout v-bind="viewLayout">
    <template #header>
      <FormMaker v-bind="formProps" ref="formRef" />
    </template>
  </ViewLayout>
</template>

`

export function genViewCode(domain: string, moduleName: string) {
  return tmpl.replaceAll('{{domian}}', domain.slice(0, 1).toLowerCase() + domain.slice(1))
}